<template>
  <div>
    <el-button
      type="danger"
      plain
      icon="delete"
      @click="dialogVisible = true"
      :disabled="selection.length === 0"
    >
      删除
    </el-button>
    <el-dialog
      title="删除部门"
      v-model="dialogVisible"
      width="61%"
      style="border-radius: 10px; padding: 5px 10px"
    >
      <h3 style="margin-bottom: 20px">你将删除以下部门</h3>
      <el-table
        :data="selection"
        v-loading="loading"
        row-key="deptId"
        element-loading-text="加载中..."
        default-expand-all
        border
      >
        <el-table-column
          prop="deptName"
          label="部门名称"
          width="200"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="部门ID"
          width="150"
          align="center"
        ></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="{ row }">
            <el-tag :type="row.state == '0' ? 'danger' : 'success'">
              {{ row.state == "0" ? "停用" : "正常" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200"
          align="center"
        ></el-table-column>
      </el-table>
      <div class="footer">
        <el-button type="primary" @click="submit()">提交</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { deleteDept } from "@/service/api/dept";
import eventBus from "@/utils/event-bus";

const dialogVisible = ref(false);

const props = defineProps({
  selection: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["getDeptTree"]);

//提交
const submit = async () => {
  const deptIds = [];
  for (const dept of props.selection) {
    deptIds.push(dept.id);
  }
  await deleteDept(deptIds);
  dialogVisible.value = false;
  emit("getDeptTree");
};
</script>
<style lang="scss">
.footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
